<template>
    <div>
        <p>姓名:{{otherperson.name}}</p>
        <p>年龄:{{otherperson.age}}</p>
        <button type="button" @click="otherperson.name+='```'">修改姓名</button>
        <button type="button" @click="otherperson.age++">修改年龄</button>
    </div>
    <br/>
    <div>
      <p>当前鼠标的坐标使用hooks实现：
        x:{{ point.x }};y:{{ point.y }};
      </p>
    </div>
    </template>
    
    <script setup>
    import {useMousePosition,extest}from '@/hooks/useMousePosition'
    let nameVal = ref('john');
    let ageVal = ref(100);
    let otherperson = ref({
        name: nameVal,
        age: ageVal
    });
    
    //hooks
     let point =useMousePosition();
     extest();
    </script>
    
    <style lang="less" scoped>
    body {
        width: 100px;
        height: 100px;
        background: #fff;
    }
    </style>
    <!-- 在hooks实现 
    // src/hooks/useMousePosition.js
    
    在app.vue中引入useMousePosition.js hooks
    import useMousePosition from '../hooks/useMousePosition'
    就可以去掉app.vue中的代码中定于ponit 及相关方法
    -->